<template>
	<view class="page_edu">
		<view class="page_edu_header">
			<view class="header">
				<image src="/static/icon_main.png" class="btn"></image>
				<view class="input">
					<image src="/static/search.png" class="search"></image>
					<input type="text" value="" placeholder="搜索" />
				</view>
				<image src="/static/msg.png" class="btn"></image>
			</view>
			<view class="header_content">
				<bw-swiper :swiperList="swiperList" :swiper-type="true" :indicator-dots="true" style="width:100%"></bw-swiper>
			</view>
		</view>
		<view class="page_content">
			<view class="menu">
				<view v-for="(it,i) in menus" :key="i" @click="choose(it)">
					<view class="item" :key="i">
						<view class="img_view" :style="{background: it.bg}">
							<image :src="it.icon" class="image"></image>
						</view>
						<text class="txt">{{it.txt}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page_list">
			<view class="page_list_header">最新动态</view>
			<view v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
				<view class="page_list_title">
					<view class="page_list_title_text">
						{{item.title}}
					</view>
					<view class="page_list_title_time">
						{{item.published_at}}
					</view>
				</view>
				<view class="page_list_line"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue'
	export default {

		data() {
			return {
				menus: [{
						bg: 'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',
						icon: '/static/law.png',
						path: 'searchLaw',
						txt: '查询违法行为',
					},
					{
						bg: 'linear-gradient(0deg,rgba(251,184,35,1),rgba(255,228,40,1))',
						icon: '/static/manageLaw.png',
						path: 'queryLaw',
						txt: '管理违法行为',
					},
					{
						bg: 'linear-gradient(0deg,rgba(255,126,34,1),rgba(240,184,27,1))',
						icon: '/static/enforce.png',
						path: 'searchEnforce',
						txt: '查询执法信息',
					},
					{
						bg: 'linear-gradient(0deg,rgba(9,177,252,1),rgba(24,200,255,1))',
						icon: '/static/manageEnforce.png',
						path: 'enforceLaw',
						txt: '管理执法信息',
					}
				],
				swiperList: [{
						img: '/static/img/timg2.jpg'
					},
					{
						img: '/static/img/timg1.jpg'
					},
					{
						img: '/static/img/timg.jpg'
					}
				],
				dataList: [{
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg3.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "整治河道，我们在行动！"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg5.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "河道管理站1月18日工作动态"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "全市河道管理工作会议召开"
				}, {
					author_name: "河道管理新闻",
					content: "",
					cover: '/static/img/timg6.jpg',
					id: 107868,
					post_id: "5276743",
					published_at: "2019-12-18",
					title: "全市河道管理工作会议召开"
				}
				]
			}
		},
		components: {
			bwSwiper
		},
		onLoad() {
			wx.getSetting({
			  success (res) {
				console.log(res)
				if (!res.authSetting["scope.userInfo"]){
					uni.redirectTo({
						url: "/pages/tabbar/shilu-login/reg"
					})
				}
			  }
			})
		},
		methods: {
			goDetail(e){
				let detail = {
					author_name: e.author_name,
					cover: e.cover,
					id: e.id,
					post_id: e.post_id,
					published_at: e.published_at,
					title: e.title
				}
				uni.navigateTo({
					url: "../tabbar-4/cpn/list2detail-detail?detailDate=" + encodeURIComponent(JSON.stringify(
						detail))						
				})
			},
			choose(e){
				uni.navigateTo({
					url: "./cpn/" + e.path						
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #ebebeb;
	}
</style>
<style lang="scss" scoped>
	@function realSize($args) {
		@return $args / 1.5;
	}

	.page_edu {
		width: 100%;
	}

	.page_list {
		background-color: #FFF;
		border-radius: 20upx;
		margin: 20upx;

		&_header {
			font-size: 40upx;
			padding: 20upx 20upx;
			color: #2F85FC;
			font-weight: bold;
		}

		&_title {
			font-size: 32upx;
			padding: 20upx 20upx 0 20upx;
			display: flex;
			&_text {
				max-width: 13em;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			&_time {
				font-size: 28upx;
				position: absolute;
				right: 60upx;
				color: #999
			}
		}
		&_line{
			margin-left:20upx;
			margin-top: 20upx;
			width:660upx;
			height:2upx;
			background:rgba(238,238,238,1);
		}

	}

	.page_edu_header {
		// padding-top: var(--status-bar-height);
		background-color: #0bc99d;
		width: 100%;
		height: realSize(830upx);

		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: realSize(40upx);

			.btn {
				width: realSize(72upx);
				height: realSize(60upx);
			}

			.input {
				height: realSize(118upx);
				width: 100%;
				margin-left: realSize(40upx);
				margin-right: realSize(40upx);
				background: rgba(255, 255, 255, 1);
				border-radius: realSize(60upx);
				display: flex;
				flex-direction: row;
				align-items: center;

				.search {
					width: realSize(60upx);
					height: realSize(60upx);
					margin-left: realSize(40upx);
					margin-right: realSize(40upx);
				}
			}
		}

		.header_content {
			display: flex;
			flex-direction: row;

			.left {
				display: flex;
				flex-direction: column;
				width: 57%;
				margin-top: 20upx;
				margin-left: 30upx;
				margin-right: 30upx;

				.title {
					width: realSize(838upx);
					height: realSize(118upx);
					font-size: realSize(94upx);
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.sub_title {
					margin-top: 6upx;
					font-size: realSize(36upx);
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					background: linear-gradient(0deg, rgba(120, 255, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.btn {
					margin-top: 36upx;
					width: realSize(396upx);
					height: realSize(120upx);
					background: linear-gradient(-30deg, rgba(252, 135, 29, 1), rgba(246, 185, 9, 1));
					box-shadow: 0 8upx 20upx 0 rgba(255, 121, 0, 0.5);
					border-radius: realSize(30px);
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.page_content {
		width: 100%;
		margin-top: -74upx;

		.menu {
			margin-left: 20upx;
			margin-right: 20upx;
			padding-left: 20upx;
			padding-right: 20upx;
			height: realSize(352upx);
			background: rgba(255, 255, 255, 1);
			box-shadow: 0 20upx 20upx 0 rgba(0, 161, 124, 0.1);
			border-radius: 20upx;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 36upx;
				.img_view {
					width: 120upx;
					height: 120upx;
					border-radius: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;

					.image {
						width: 70upx;
						height: 70upx;
					}
				}

				.txt {
					margin-top: 10upx;
					font-size: 26upx;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.s_menu {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;
			margin-top: 30upx;
			margin-left: 20upx;
			margin-right: 20upx;
			padding-left: 20upx;
			padding-right: 20upx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.image {
					width: 70upx;
					height: 70upx;
				}

				.txt {
					margin-top: 10upx;
					font-size: 28upx;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.ad {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.bg {
				position: absolute;
				width: 240upx;
				height: 210upx;
				left: 0;
			}

			.ad_btn {
				width: 100%;
				height: 126upx;
				margin: 60upx;
				background: linear-gradient(0deg, rgba(253, 155, 28, 1), rgba(251, 197, 33, 1));
				border-radius: 134upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-size: realSize(76upx);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					color: rgba(255, 255, 255, 1);
				}

				.sub_title {
					background: linear-gradient(0deg, rgba(255, 128, 37, 1), rgba(255, 153, 32, 1));
					box-shadow: 0 8upx 10upx 0 rgba(92, 53, 48, 0.3), 0 2upx 0 0 rgba(228, 228, 228, 1);
					border-radius: realSize(48upx);
					font-size: realSize(48upx);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					font-style: italic;
					color: rgba(255, 236, 177, 1);
					line-height: realSize(52upx);
				}
			}
		}
	}
</style>
